<template>
    <div class="list_address_page">
        <div  v-if="current_state=='list'">
            <ul class="list_address_ul">
                <li v-for="item in user_address_list" @click="postAddressSel(item)">
                    <div class="top_wrap">
                        <div class="sel_img_wrap">
                            <img src="~assets/images/icon_option_no.png" class="sel_img">
                        </div>
                        <div class="name_wrap" v-text="item.consumer_name">
                        </div>
                        <div v-text="item.mobile_phone"></div>
                    </div>
                    <div class="bottom_wrap" v-text="item.city_str">
                    </div>
                </li>
            </ul>
        </div>
        <div v-if="current_state=='add'">
            <user-address @addressSuccess="addressSuccessFun"></user-address>
        </div>
        <div class="confirm_btn" @click="current_state='add'" v-if="current_state=='list'">添加收货地址</div>
    </div>
</template>

<script>
import userAddress from '@/page/user_address.vue'
import { mapState } from 'vuex'
import api from '@/api/api'
export default {
    name: 'listAddress',
    data() {
        return {
            current_state: 'list',
            userAddress: this.Province,
            user_address: {},
            user_address_list: []
        }
    },
    components: {
        userAddress
    },
    methods: {
        postStepChange: function (val) {

        },
        postAddressShow: function () {
            this.$store.commit('setAddressShow', true);
        },
        getAddressList: function(){
            let params = {
                user_id: this.user_id,
                functioncode: 'shopping_address_list'
            };
            let _self = this;
            api.get(params).then(function (res) {
                if (res.data.returncode === '000000' && res.data.record) {
                     _self.user_address_list =  res.data.record;
                     for(let item of _self.user_address_list){
                        item.city_str = item.city+' '+ item.detail_address;
                     }
                } else {
                     _self.$toast('收货地址添加失败！');
                    return;
                }
            });
        },
        addressSuccessFun: function(){
            this.current_state = 'list';
            this.getAddressList();
        },
        postAddressSel: function(target){
            this.$store.commit('setAddressSel' , target);
            this.$router.push({
                name: 'user_confirm',
                params: { gift_id:  this.$route.params.gift_id }
            });
        },
        postGiftReceived: function () {
            let _self = this;
            let add_params = {
                functioncode: 'receive_gift',
                gift_id: this.$route.params.gift_id,
                consumer_name: this.user_address.consumer_name,
                consumer_mobile_phone: this.user_address.consumer_mobile_phone,
                consumer_city: '',
                consumer_street: this.userAddInput + ' ' + this.user_address.consumer_street,
                consumer_detail_address: this.user_address.consumer_detail_address,
                user_id: this.user_id
            };
            if (this.user_address.consumer_name == '') {
                _self.$toast('为确保您收货无误，收货人姓名不能为空哦！');
                return;
            }
            if (this.user_address.consumer_mobile_phone == '') {
                _self.$toast('为确保您收货无误，收货人联系电话不能为空哦！');
                return;
            }
            if (this.user_address.userAddInput == '') {
                _self.$toast('为确保您收货无误，请选择收货人所在城市！');
                return;
            }
            if (this.user_address.consumer_street == '') {
                _self.$toast('为确保您收货无误，请输入收货人所在街道！');
                return;
            }
            if (this.user_address.consumer_detail_address == '') {
                _self.$toast('为确保您收货无误，请准确的输入您的详细地址！');
                return;
            }
            api.post(add_params).then(function (res) {
                if (res.data.returncode === '000000' && res.data.record) {
                    _self.$router.push({
                        name: 'gift_received',
                        query: { is_ok: 'ok' }
                    });
                } else {
                    _self.$router.push({
                        name: 'gift_received',
                        query: { is_ok: 'sorry' }
                    });
                }
            });

        }
    },
    computed: {
        ...mapState({
            Province: state => state.Province,
            City: state => state.City,
            District: state => state.District,
            cityAddressShow: state => state.city_show,
        }),
        userAddInput() {
            return this.$store.state.Province + ' ' + this.$store.state.City + ' ' + this.$store.state.District
        }
    },
    mounted: function () {
        this.$nextTick(() => {
            this.getAddressList();
        })
    },

}
</script>

